import '@wangeditor/editor/dist/css/style.css';
import { useState, useEffect, useRef } from 'react';
import { Editor, Toolbar } from '@wangeditor/editor-for-react';
import {
  IDomEditor,
  IEditorConfig,
  DomEditor,
  IToolbarConfig,
  createEditor,
} from '@wangeditor/editor';
import editorStyle from './style.less';
import { MyEditorNewAPI } from './type';
import { getBaseUrl } from '@/services/urlconst';
import { getTenant } from '@/utils';
import { request } from 'umi';
import { message } from 'antd';
export const MyEditorNew: React.FC<MyEditorNewAPI.IMyEditor> = ({
  bodyHeight,
  editorForm, //表单form
  formName,
  editorValue,
  toolbarKeysData,

  imgName,
  accept,
  maxSize,
  uploadAction,
  imgAction,
}) => {
  // 存储 editor 实例
  const [editor, setEditor] = useState<any>();

  // 自定义上传中获取实例
  const editorRef: any = useRef();

  // 编辑器内容
  const [html, setHtml] = useState('');

  /**
   * @toolbarKeys  显示哪些菜单
   * @toolbarKeysData  传配置项时，显示配置项工具，反之显示编辑器默认工具
   */
  const toolbarConfig = {
    toolbarKeys: toolbarKeysData
      ? toolbarKeysData
      : [
          'headerSelect',
          'blockquote',
          '|',
          'bold',
          'underline',
          'italic',
          {
            key: 'group-more-style',
            title: '更多',
            iconSvg:
              '<svg viewBox="0 0 1024 1024"><path d="M204.8 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path><path d="M505.6 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path><path d="M806.4 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path></svg>',
            menuKeys: ['through', 'code', 'sup', 'sub', 'clearStyle'],
          },
          'color',
          'bgColor',
          '|',
          'fontSize',
          'fontFamily',
          'lineHeight',
          '|',
          'bulletedList',
          'numberedList',
          'todo',
          {
            key: 'group-justify',
            title: '对齐',
            iconSvg:
              '<svg viewBox="0 0 1024 1024"><path d="M768 793.6v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z m-204.8-230.4v102.4H51.2v-102.4h716.8zM972.8 102.4v102.4H51.2V102.4h921.6z"></path></svg>',
            menuKeys: [
              'justifyLeft',
              'justifyRight',
              'justifyCenter',
              'justifyJustify',
            ],
          },
          {
            key: 'group-indent',
            title: '缩进',
            iconSvg:
              '<svg viewBox="0 0 1024 1024"><path d="M0 64h1024v128H0z m384 192h640v128H384z m0 192h640v128H384z m0 192h640v128H384zM0 832h1024v128H0z m0-128V320l256 192z"></path></svg>',
            menuKeys: ['indent', 'delIndent'],
          },
          '|',
          'emotion',
          'insertLink',
          {
            key: 'group-image',
            title: '图片',
            iconSvg:
              '<svg viewBox="0 0 1024 1024"><path d="M959.877 128l0.123 0.123v767.775l-0.123 0.122H64.102l-0.122-0.122V128.123l0.122-0.123h895.775zM960 64H64C28.795 64 0 92.795 0 128v768c0 35.205 28.795 64 64 64h896c35.205 0 64-28.795 64-64V128c0-35.205-28.795-64-64-64zM832 288.01c0 53.023-42.988 96.01-96.01 96.01s-96.01-42.987-96.01-96.01S682.967 192 735.99 192 832 234.988 832 288.01zM896 832H128V704l224.01-384 256 320h64l224.01-192z"></path></svg>',
            menuKeys: ['insertImage', 'uploadImage'],
          },
          {
            key: 'group-video',
            title: '视频',
            iconSvg:
              '<svg viewBox="0 0 1024 1024"><path d="M981.184 160.096C837.568 139.456 678.848 128 512 128S186.432 139.456 42.816 160.096C15.296 267.808 0 386.848 0 512s15.264 244.16 42.816 351.904C186.464 884.544 345.152 896 512 896s325.568-11.456 469.184-32.096C1008.704 756.192 1024 637.152 1024 512s-15.264-244.16-42.816-351.904zM384 704V320l320 192-320 192z"></path></svg>',
            menuKeys: ['insertVideo', 'uploadVideo'],
          },
          'insertTable',
          'codeBlock',
          'divider',
          '|',
          'undo',
          'redo',
          '|',
          'fullScreen',
        ],
  };

  const editorConfig: any = {
    placeholder: '请输入内容...',
    MENU_CONF: {},
  };

  let uploadImgParams: Record<string, any> = {
    uploadImgSize: document.getElementsByClassName('w-e-image-container')
      .length,
    maxSize: maxSize,
  };

  // console.log(uploadImgParams, 'uploadImgParams++++++++++++++++')

  /**
   * 处理base64图片
   */
  editorConfig.MENU_CONF['uploadImage'] = {
    // server: '',
    // base64LimitSize: 100 * 1024 * 1024, // 100 兆
    // server: `${getBaseUrl()}${uploadAction}`,
    // uploadImgShowBase64: true,
    // uploadImgMaxLength: maxSize,
    // fieldName: 'attachFile',
    // maxFileSize: maxSize * 1024 * 1024,
    // maxNumberOfFiles: maxSize,
    // allowedFileTypes: ['image/*'],
    // method: 'POST',
    // headers: {
    //   "tenantName": getTenant(),
    // },
    // 自定义上传
    customUpload(
      file: File,
      insertFn: MyEditorNewAPI.InsertFnType,
      params: Record<string, any> = uploadImgParams,
    ) {
      const formData = new FormData();
      formData.append('attachFile', file);
      let editDom = document.getElementsByClassName('editorDom');

      // console.log(params, 'params+++++++++++++')
      // console.log(params?.uploadImgSize, 'uploadImgSize1111')
      // console.log(params?.maxSize, 'maxNumberOfFiles1111')
      // console.log(editDom,'editDom+++++++++++++')

      if (editDom && editDom?.length > 0) {
        if (params?.uploadImgSize <= params?.maxSize) {
          request(`${getBaseUrl()}${uploadAction}`, {
            method: 'POST',
            headers: {
              tenantName: getTenant(),
            },
            data: formData,
            requestType: 'form',
          }).then((res) => {
            request(`${getBaseUrl()}${imgAction}`, {
              method: 'PUT',
              headers: {
                tenantName: getTenant(),
              },
              data: {
                assetImage: res?.url,
              },
              requestType: 'json',
            }).then((res) => {
              let newLabel = document.createElement('div');
              (newLabel.className = 'imgs'),
                (newLabel.innerHTML = `<img src="${res?.obj}" alt="${file.name}" />`);
              editorRef?.current?.dangerouslyInsertHtml(newLabel.innerHTML);
              // editorRef?.current?.dangerouslyInsertHtml(
              //   `<div className="imgs"><img src="${res?.obj}" alt="${file.name}" /></div>`,
              // );
            });
          });
        }
      }
    },
  };

  // 及时销毁 editor，重要！
  useEffect(() => {
    return () => {
      if (editor == null) return;
      editor.destroy();
      setEditor(null);
    };
  }, [editor]);

  useEffect(() => {
    if (editorValue) {
      setHtml(editorValue);
    }
  }, [editorValue]);

  const handleCreated = (editor: any) => {
    editorRef.current = editor; // 记录 editor 实例，重要！
    setEditor(Object.seal(editor));
  };

  return (
    <>
      <div
        className={editorStyle['editorStyles']}
        style={{ border: '1px solid #ccc', zIndex: 100 }}
      >
        <Toolbar
          editor={editor}
          defaultConfig={toolbarConfig}
          mode="default"
          style={{ borderBottom: '1px solid #ccc' }}
        />
        <Editor
          className="editorDom"
          defaultConfig={editorConfig}
          value={html}
          // onCreated={setEditor}
          onCreated={handleCreated}
          onChange={(editor) => {
            let editorHtme = editor.getHtml();
            let editorText = editor.getText();
            /**
             * 判断是否输入值了,
             */
            if (editorHtme == '<p><br></p>') {
              editorForm?.setFieldsValue({ [formName]: undefined });
            } else {
              let editorJson = {
                contentText: editorText,
                contentHtml: editorHtme,
              };
              editorForm?.setFieldsValue({ [formName]: editorJson });
            }
            setHtml(editor.getHtml());
          }}
          mode="default"
          style={{ height: bodyHeight }}
        />
      </div>
    </>
  );
};
